<!--
 * @Description: 
 * @Author: xuqi
 * @Github: https://github.com/knight-peter
 * @LastEditors: xuqi
 -->
<template>
  <div class="m-page">
    <van-nav-bar
      class="m-page__bar"
      title="注册"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-field
        v-model="mobile"
        label="手机号码"
        type="tel"
        placeHolder="请输入手机号码"
        required
      />
      <van-field
        v-model="text_code"
        label="验证码"
        placeHolder="请输入验证码"
        required
      >
        <van-button
          slot="button"
          size="small"
          type="primary"
          @click="sendCode"
          :disabled="sendDisabled"
          >{{ sendText }}</van-button
        >
      </van-field>
      <van-field
        v-model="password"
        label="登录密码"
        type="password"
        placeHolder="请输入密码"
        required
      />
      <van-field
        v-model="realname"
        label="真实姓名"
        placeHolder="请输入您的真实姓名"
        required
      />
      <van-field
        v-model="bank"
        label="银行"
        placeHolder="请输入您想绑定银行名称，例：农行"
        required
      />
      <van-field
        v-model="bankcard"
        label="银行卡号"
        placeHolder="请输入您想绑定银行卡卡号"
        required
      />
      <van-field
        v-model="receiver_area"
        label="收货地区"
        placeHolder="选择省 / 市 / 区"
        @click="selectArea"
        readonly
        required
      />
      <van-field
        v-model="receiver_address_more"
        label="详细地址"
        placeHolder="请输入您的常用收货地址"
        required
      />
    </van-cell-group>
    <div class="g-p--10">
      <van-button type="danger" size="large" @click="doSignup"
        >确认提交</van-button
      >
    </div>
    <div class="p-logo-wrap"><img src="~_a/img/logo.png" alt="" /></div>
    <!-- 选择地区 start -->
    <van-popup v-model="show_area" position="bottom">
      <van-area
        ref="area"
        :area-list="areaList"
        @confirm="confirmArea"
        @cancel="cancelArea"
      />
    </van-popup>
    <!-- 选择地区 end -->
  </div>
</template>

<script>
import { NavBar, CellGroup, Field, Button, Popup, Area } from "vant";
import { userModel } from "@/api";
import Tool from "@/lib/tool";
import Util from "@/lib/util";
import areaList from "@/lib/area";

const tool = new Tool();
const util = new Util();
export default {
  name: "user_info",
  components: {
    "van-nav-bar": NavBar,
    "van-cell-group": CellGroup,
    "van-field": Field,
    "van-button": Button,
    "van-area": Area,
    "van-popup": Popup
  },
  data() {
    return {
      mobile: "",
      password: "",
      text_code: "",
      realname: "",
      bank: "",
      bankcard: "",
      receiver_area: "",
      receiver_address_more: "",
      receiver_area_name: "",
      receiver_area_code: "",
      show_area: false,
      areaList,
      sendDisabled: false,
      sendText: "发送验证码",
      back_url: ""
    };
  },
  mounted() {
    this.back_url = decodeURIComponent(this.$route.query.redirect || "/");
  },
  methods: {
    /* 选择地区 */
    selectArea() {
      this.show_area = true;
    },
    /* 地区选择成功 */
    confirmArea(res) {
      this.show_area = false;
      const province = res[0];
      const city = res[1];
      const area = res[2];
      this.receiver_area = province.name + city.name + area.name;
      this.receiver_area_name = `${province.name}/${city.name}/${area.name}`;
      this.receiver_area_code = area.code;
    },
    /* 地区选择取消 */
    cancelArea() {
      this.show_area = false;
      this.$refs.area.reset();
    },
    sendCode() {
      let that = this;
      if (!this.mobile) return;
      if (!tool.checkStr(this.mobile, "phone")) {
        this.$toast({ type: "fail", message: "手机号码错误", duration: 1500 });
        return;
      }
      userModel
        ._sendTextCode({
          mobile: this.mobile
        })
        .then(res => {
          util._doneSuccess({ res });
        });
      util._setTime({
        countdown: 60,
        start() {
          that.sendText = "获取验证码";
          that.sendDisabled = false;
        },
        end(num) {
          that.sendText = `重新发送 ${num} 秒`;
          that.sendDisabled = true;
        }
      });
    },
    /* 注册 */
    doSignup() {
      let formData = {
        mobile: this.mobile,
        password: this.password,
        text_code: this.text_code,
        realname: this.realname,
        bank: this.bank,
        bankcard: this.bankcard,
        receiver_address: this.receiver_address_more,
        receiver_area_name: this.receiver_area_name,
        receiver_area_code: this.receiver_area_code
      };
      if (!tool.formDataCheck(formData)) {
        this.$toast({ type: "fail", message: "必填项为空！", duration: 1500 });
        return;
      }
      const loginInfo = { password: this.password, mobile: this.mobile };
      // dispatch toLogin action
      this.$store.dispatch("doSignup", formData).then(() => {
        console.log("注册-登录完成");
        // dispatch getUserInfo action
        this.$ls.set("loginInfo", loginInfo);
        this.$store.dispatch("getUserInfo");
        this.$router.push({
          path: this.back_url
        });
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped></style>
